<template>
    <div class='goods_info_box'>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="change">
          <van-swipe-item v-for='item in info.images' :key='item'>
            <img :src="item" alt="">
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              {{ current + 1 }}/4
            </div>
          </template>
        </van-swipe>

        <van-goods-action>
          <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartNum" />
          <van-goods-action-icon icon="shop-o" text="店铺"/>
          <van-goods-action-button type="warning" @click='add' text="加入购物车" />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>
<script>
// @ is an alias to /src
import {getProductInfo,addCart} from '@/api/api'
export default {
    name: 'GoodInfoPage',
    data() {
        return {
          info:{},
          current:1
        }
    },
    created() {
      this.getInfo()
    },
    methods: {
      add(){
        addCart({pid:this.$route.params.id,count:1}).then(data=>{
          console.log(data)
          this.$store.commit('addCart',this.info)
        })
      },
      change(n){
        this.current = n
      },
      getInfo(){
        console.log(this.$route.params.id)
        getProductInfo(this.$route.params.id).then(data=>{
          console.log(data)
          this.info = data.data
        })
      }
    },
    computed: {
        cartNum(){
          return this.$store.state.cartList.length
        }
    }
}
</script>
<style lang="less">
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    img{
      width: 100%;
    }
  }
</style>